<template>
    <div class="choose_auth-wrapper form">
        <switcher @to_switch="to_switch" :name="field.name" :fval="show_swtich" :show_text="[ '显示所有' , '模块过滤']"></switcher>
        <p v-show="show_swtich">
            <myenum :param="{}" v-if="enumField_model.enum_val&&enumField_model.fval!==undefined" :field="enumField_model" @setVo='setEnum' ></myenum>
        </p>
        <transition name="fade">
            <form  action="" class="ui form" >
            <div class="ui items segment" :class="{loading}">

                <div class="ui item" v-for="(title,mid) in titles">
                    <div class="content ">
                        <div class="ui  dividing header">
                            <i class="icon"
                               :class="{'folder':!openModels.contains(mid),'folder open':openModels.contains(mid)}"
                               @click.stop.prevent='toggleModel(mid)'></i>
                            <div class="content">
                                <two_col>
                                    <template slot='first'>
                                        {{title}}
                                    </template>
                                    <template slot='second'>
                                        <div class="inline field">
                                            <div class="ui checkbox">
                                                <input type="checkbox" @click.stop='hlSelectAll(mid)'
                                                       v-model="selectedAll" :value="mid">
                                                <label>全选</label>
                                            </div>
                                        </div>
                                    </template>
                                </two_col>

                            </div>

                        </div>
                        <div class="sub_ul" v-show="openModels.contains(mid)">
                            <div v-for="mem in auth[mid]" class="ui compact message">
                                <div class="inline field">
                                    <div class="ui checkbox">
                                        <input type="checkbox" v-model="selected" :value="`${mid}_${mem.id}`">
                                        <label>{{mem.title}}</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        </transition>
    </div>
</template>

<script type="text/ecmascript-6">
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import in_array from 'in_array';
    import _ from 'lodash';
    import two_col from 'components/layout/two_col';
    import switcher from 'components/common/switcher'
    import myenum from 'components/field/enum';

    export default {
        data() {
            return {
                val: '',
                enumField_model:{
                    name:'model',
                    title:'模块',
                    enum_type:1,
                    hideTitle:true,
                    fval:'',
                    enum_val:null
                },
                loading: true,
                show_swtich: true,
                titles: {},
                titles_copy: null,
                model: null,
                openModels: [],
                selected: [],
                selectedAll: [],
                auth: null
            }
        },
        components: {two_col, switcher,myenum},
        methods: {
            setEnum(name, val,text) {
                this.titles = {};
                if(val) {
                    this.titles[val]=text;
                    this.model = this.titles;
                }
            },
            to_switch(val){
                this.show_swtich = val;
                if(!this.show_swtich) {
                    this.titles = this.titles_copy;
                }else{
                    this.titles = this.model || this.titles_copy;
                }
            },
            hlSelectAll(mid) {
                if (this.selectedAll.contains(mid)) {
                    this.auth[mid].forEach(item => {
                        let authStr = `${mid}_${item.id}`;
                        this.selected = _.union(this.selected, [authStr]);
                    });
                } else {
                    let auths = this.auth[mid].map(item => {
                        return `${mid}_${item.id}`;
                    });
                    _.remove(this.selected, (item) => in_array(item, auths));
                    this.$emit('setVo', this.field.name, JSON.stringify(this.selected))

                }


            },
            toggleModel(mid) {
                if (!this.openModels.contains(mid)) {
                    this.openModels.push(mid);
                } else
                    this.openModels.remove(mid);
            },
            getAuthAll(){
                let url = tool.getApi(this, 'Authority', 'getAuthAll');
                let param = {}
                util.getDataCom(this, url, param, (data) => {
                    this.titles_copy = data.titles
                    this.auth = data.auth
                    this.openModels = Object.keys(this.auth);
                    this.loading=false;
                    this.set_enum_val();
                });
            },
            set_enum_val(){
                let tmp = [];
                util.forEach(this.titles_copy,(id,title) => {
                    tmp.push({title, id}) ;
                });
                this.enumField_model.enum_val = tmp;
            }
        },
        watch: {
            selected: function (val, old) {
                if (val != old) {
                    this.$emit('setVo', this.field.name, JSON.stringify(val))
                }
            }
        },
        computed: {

        },
        props: ['field'],
        created() {
            this.getAuthAll()
            if (this.field.fval)
                this.selected = JSON.parse(this.field.fval)


        },
        mounted() {
            this.$nextTick(() => {
                $('.ui.checkbox').checkbox();
            })
        }
    };
</script>

<style lang="less" rel="stylesheet/less" scoped>
    @import "../../../common/style/mixin";

    .fade-transition();

    .choose_auth-wrapper {
        .ui.dividing.header {
            width: 100%;
            .content {
                width: 300px;
                .checkbox label {
                    color: rgba(0, 0, 0, 0.6);
                }
            }
            i {
                cursor: pointer;
                &:hover {
                    color: rgba(0, 0, 0, 0.8);
                }
            }
            i, .content {
                color: rgba(0, 0, 0, 0.6);
            }

        }
        .compact_msg();
    }
</style>
